import { getListedStockInfo } from '@/services/zhirong/financialPublicOpinion';
import ProCard from '@ant-design/pro-card';
import { useRequest } from '@umijs/hooks';
import { Divider, Tag, Tabs } from 'antd';
import { memo, useEffect, useRef } from 'react';
import { useState } from 'react';
import Chart from './Chart';
import './index.less';
const getCategory = (code) => {
  switch (code[0]) {
    case '0':
      return {
        category: 'SHE',
        unit: 'CNY',
      };

    case '2':
      return {
        category: 'SHE',
        unit: 'HKD',
      };

    case '6':
      return {
        category: 'SHA',
        unit: 'CNY',
      };

    case '9':
      return {
        category: 'SHA',
        unit: 'USD',
      };

    default:
      return {
        category: '',
        unit: '',
      };
  }
};
const TabPane = Tabs.TabPane;

const CompanyDetail = ({ data, showDrawer, prediction }) => {
  console.log("1212", data)
  const open = useRef(1);
  const previous = useRef(1);
  const rate = useRef(-2.5);
  //const [detail, setDetail] = useState(data.companyList.find((e) => e.stockCode === data.company));
  const [stockInfo, setStockInfo] = useState();

  const info = data.data;
  const dapandata = data.dapandata;
  const gopicture = data.gopicture;

  const { run: getInfo, loading: loadingInfo } = useRequest(getListedStockInfo, {
    onSuccess: (res) => {
      console.log('getinfo---success!');
      console.log(res.data);
      setStockInfo({ ...res.data });
    },
    onError: (err) => {
      console.log('theres err:', err);
    },
  });

  // console.log('---data:', data);

  // useEffect(() => {
  //   // getDetail(data.company ? data.company : '000001');
  //   getInfo({
  //     stockCode: data.company ? data.company : '000001',
  //     currentDate: data.date ? data.date : '2021-01-16',
  //     timeWindowSize: data.day ? data.day : 7,
  //   });
  //   setDetail(data.companyList.find((e) => e.stockCode === data.company));
  // }, [data.company, data.companyList, data.date, data.day, getInfo]);
  // //  因为stockinfo注释掉的
  // useEffect(() => {
  //   open.current = stockInfo?.infoList[0]?.open ?? open.current;
  //   previous.current = stockInfo?.infoList[0]?.previousClose ?? previous.current;
  //   rate.current = ((open.current - previous.current) / previous.current) * 100;
  // }, [detail, stockInfo]);


  return (
    <ProCard ghost loading={loadingInfo}>
      <p style={{ marginBottom: 0 }}>
        {info?.gid || ''}
      </p>
      <h2
        style={{
          fontFamily: 'Microsoft YaHei',
          fontWeight: 'bold',
          display: 'inline',
          marginBottom: 0,
        }}
      >
        {info?.name || ''}
      </h2>
      {/* <span onClick={showDrawer} style={{ cursor: 'pointer', color: '#9254DE', float: 'right' }}>
        查看关联企业
      </span> */}
      <Divider style={{ margin: '12px 0' }} />
      <div>
        <span
          style={{
            fontSize: '24px',
            fontWeight: 'bold',
            marginRight: '1rem',
            color: Number(dapandata?.nowPic || '0.00') < 0 ? '#87d068' : '#cd201f',
          }}
        >
          {`${dapandata?.dot || '0.00'}`}
          {/* stockInfo为一个空对象 */}
          {/* {console.log('its me hi',stockInfo)} */}
        </span>
        <span style={{ fontSize: '16px', color: Number(dapandata?.nowPic) < 0 ? '#87d068' : '#cd201f' }} > {dapandata?.nowPic || '0.00'}</span>
        <span style={{ fontSize: '16px', color: Number(dapandata?.nowPic) < 0 ? '#87d068' : '#cd201f' }}> {dapandata?.rate || '0.00 %'}</span>
        <div style={{ display: 'flex', flexDirection: 'row', marginTop: '1rem' }} >
          <div className='info-div'>
            <div>今 开
              <span style={{ color: Number(dapandata?.todayStartPri) < Number(dapandata?.yestodEndPri) ? '#87d068' : '#cd201f' }}>{info?.todayStartPri || '0.00'}</span>
            </div>

            <div>昨 收
              <span >{info?.yestodEndPri || '0.00'}</span>
            </div>

          </div>
          <div className='info-div'>
            <div>最 高
              <span style={{ color: '#cd201f' }}>{info?.todayMax || '0.00'}</span>
            </div>
            <div>最 低
              <span style={{ color: '#87d068' }}>{info?.todayMin || '0.00'}</span>
            </div>


          </div>
          <div className='info-div'>
            <div>成交量
              <span>{Number(dapandata?.traNumber / 10000).toFixed(2) || '0.00'}万手</span>
            </div>

            <div>成交额
              <span>{Number(dapandata?.traAmount / 10000).toFixed(2) || '0.00'}亿</span>

            </div>
          </div>


        </div>


        <Tabs defaultActiveKey="1" type='card' className='mou-div'>
        <TabPane tab="分时" key="1">
          {gopicture?.minurl ? (
            <img src={gopicture.minurl} alt="分时股价图" />
          ) : null}
        </TabPane>
        <TabPane tab="日k" key="2">
          {gopicture?.dayurl ? (
            <img src={gopicture.dayurl} alt="日K线图" />
          ) : null}
        </TabPane>
        <TabPane tab="周k" key="3">
          {gopicture?.weekurl ? (
            <img src={gopicture.weekurl} alt="周K线图" />
          ) : null}
        </TabPane>
        <TabPane tab="月k" key="4">
          {gopicture?.monthurl ? (
            <img src={gopicture.monthurl} alt="月K线图" />
          ) : null}
          </TabPane>

        </Tabs>

        {/* <Tag
          color={rate.current > 0 ? 'red' : 'green'}
          style={{ fontWeight: 'bold', border: 'none', fontSize: '16px' }}
        >{`${rate.current > 0 ? '↑' : '↓'}${rate.current.toFixed(1)}%`}</Tag>
        <p style={{ marginTop: '2.5px', color: 'grey' }}>{stockInfo?.infoList[0]?.date}</p> */}
      </div>
      {/* <Chart
        //  因为stockinfo注释掉的
        data={stockInfo?.infoList}
        date={prediction.date}
        prediction={prediction}
      /> */}
    </ProCard >
  );
};

export default memo(CompanyDetail);
